<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">


    <title>武侯祠管理系统</title>
    
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <!-- <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/> 
    <style type="text/css">
        #container{
            width: 55%;
            height: 80%;
            margin-top: 84px;
            margin-left: 9%;
        }
        #spot{
            height: 80%;
            float: right;
            width: 25%;
            margin-top: 0px;
            margin-right: 9%;
            padding-top: 24px;
        }
        .myNav{
            margin-bottom: 20px;
        }
        .myFile{
            padding-left: 1.2rem;
            padding-right: 1.2rem;
            margin-top: 10px;
        }
        #save{
            margin-top: 30px;
        }

    </style>


   
</head>

<body class = " light-green lighten-4">
    <script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>
 <!--   <script src="http://cache.amap.com/lbs/static/es5.min.js"></script> -->
    

    <nav class="myNav">
      <div class="nav-wrapper   light-green darken-4">
        <a href="" class="brand-logo">&nbsp武侯祠管理系统</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="">景点</a></li>
          <li><a href="">美食</a></li>
          <li><a href="">厕所</a></li>
          <li><a href="">新闻</a></li>
          <li><a href="">广播</a></li>
          <li><a href="">反馈</a></li>
          <li><a href="">设置</a></li>
        </ul>
      </div>
    </nav>


    <div id="container" class = "card"></div>

    <div id="spot" class="card row">
        <form class="col s12  center-align" id= "uploadForm" enctype="multipart/form-data">
            <div class="row ">
                <div class="input-field col s12 ">
                    <input  id="spot_name" type="text" class="validate">
                    <label for="spot_name">景点名称</label>
                </div>
                <div class="input-field col s12">
                    <textarea id="introduction" class="materialize-textarea"></textarea>
                    <label for="introduction">景点简介</label>
                </div>
                <div  class="input-field col s12">
                    <select id="score">
                        <option value="" disabled selected>选择推荐指数</option>
                        <option value="1">一星</option>
                        <option value="2">二星</option>
                        <option value="3">三星</option>
                    </select>
                    <label>景点推荐指数</label>
                </div>

                <div class="input-field col s12 file-field " >
                    <div class="btn  light-green darken-2 myFile" >
                        <span>图片</span>
                        <input type="file" name="image1" id="file1">
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate" type="text" name="image">
                    </div>
                </div>
                <div class="input-field col s12 file-field ">
                    <div class="btn  light-green darken-2 myFile">
                        <span>音频</span>
                        <input type="file" name="voice1" id="file2" >
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate" type="text" name="voice">
                    </div>
                </div> 
                    <a class="waves-effect light-green darken-2 btn" onclick="doUpload()" id="save">保存</a>
                <div >
                </div>    

            </div>
       
        </form>
    </div>



    <script src="http://webapi.amap.com/maps?v=1.3&key=e843bab8ae313a72cea9ed68ef713efd"></script>
    <script type="text/javascript">
        $(document).ready(function() {
          $('select').material_select();
            var settings = {
            type: "POST",
            url: "http://192.168.21.16:8000/info/get_spot_list",
            dataType: "json",
            data:{
                device_id:123456,
                start:0,
                num:10    //应当返回全部
            },
            success: function(data,textStatus) {
                alert("success");
            },
            error: function(XHR, textStatus, errorThrown) {
                alert("网络错误" + XHR);
            },
        };
        $.ajax(settings);
        });
        var map = new AMap.Map('container', {
            resizeEnable: true,
            zoom:18,
            center:[104.048022,30.646217]     
        });
        var marker = null;


        var lng, lat;
        map.on('click',function(a){
            lng = a.lnglat.getLng();
            lat = a.lnglat.getLat(); 
            console.log(lng);
            console.log(lat);
            //进行经纬度判断
        });
        



        function doUpload() {            
            var name = $('#spot_name').val();
            var introduction = $('#introduction').val();
            var options = $('#score option:selected');
            var score = options.val();
            if(lng == undefined){
                alert("请在地图上选择标记！");
            }
            else if (name == undefined || introduction == undefined || score == undefined) {
                alert("请完善景点信息！");
            }
            else{
                var formData = new FormData();     
                console.log(name);
                console.log(introduction);
                console.log(score);
                formData.append("name",name);
                formData.append("introduction",introduction);
                formData.append("score",score);
                formData.append("lng",lng);
                formData.append("lat",lat);
                var simpleFile1 = document.getElementById("file1").files[0];
                formData.append("picture",simpleFile1);
                var simpleFile2 = document.getElementById("file2").files[0];
                formData.append("voice",simpleFile2);
            }

            $.ajax({
                url: 'http://192.168.21.38:8000/admin/update_spot' ,
                type: 'POST',
                data: formData,
                // async: true,
                cache: false,
                contentType: false,
                processData: false,
                success: function (returndata) {
                   alert(returndata);
                  //alert("success");
                },
                error: function (returndata) {
                  // alert(returndata);
                  alert("fail");
                }
            });
       
        }       



    </script>

</body>
</html>